<template>
  <div class="msg-log">
    <main class="main">
      <header class="header">
        <TitleName name="短信日志" />
        <el-form :model="formData" size="large" :inline="true">
          <el-row>
            <el-col :span="5">
              <el-form-item label="开始日期:">
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="请选择日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="结束日期:">
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="请选择日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="发送结果:">
                <el-select>
                  <el-option label="s" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="3">
              <el-form-item>
                <el-button class="search">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </header>
      <div class="content">
        <div class="table-wrap">
          <el-table
            max-height="520"
            :data="tableData"
            border
            @selection-change="handleSelectionChange"
          >
            <!-- <el-table-column type="selection" /> -->
            <el-table-column align="center" property="name" label="变电所名" />
            <el-table-column align="center" property="name" label="发送时间" />
            <el-table-column align="center" property="name" label="手机号" />
            <el-table-column align="center" property="name" label="发送结果" />
            <el-table-column align="center" property="name" label="发送内容" />
            <el-table-column align="center" property="name" label="回复信息" />
          </el-table>
          <div style="padding-top: 15px">
            <Pagination
              @getDataList="getDataList"
              :pageSize="pageSize"
              :total="total"
              :currentPage="currentPage"
            />
          </div>
        </div>
      </div>
    </main>
    <SearchDia v-model:visible="dialogVisible" @serachDigSure="serachDigSure" />
  </div>
</template>
<script setup lang="ts">
import SearchDia from "./component/DiaSearch";
import TitleName from "../../components/TitleName";
import { ref, reactive } from "vue";
let search = ref("");
let pageSize = ref("10");
let total = ref(111);
let currentPage = ref(1);
let dialogVisible = ref(false);
let tableData = reactive([
  { name: "sf" },
  { name: "sf" },
  { name: "sf" },
  { name: "sf" },
  { name: "sf" },
  { name: "sf" },
  { name: "sf" },
  { name: "sf" },
  { name: "sf" },
  { name: "sf" },
]);

let selMonth = ref("day");
let value1 = ref("");
let formData = reactive({});

const serachDigSure = () => {
  console.log("弹框确认");
};
const data = [
  {
    label: "Level one 1",
    children: [
      {
        label: "Level two 1-1",
        children: [
          {
            label: "Level three 1-1-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 2",
    children: [
      {
        label: "Level two 2-1",
        children: [
          {
            label: "Level three 2-1-1",
          },
        ],
      },
      {
        label: "Level two 2-2",
        children: [
          {
            label: "Level three 2-2-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 3",
    children: [
      {
        label: "Level two 3-1",
        children: [
          {
            label: "Level three 3-1-1",
          },
        ],
      },
      {
        label: "Level two 3-2",
        children: [
          {
            label: "Level three 3-2-1",
          },
        ],
      },
    ],
  },
];

const andleSelectionChange = () => {};
</script>
<style lang="scss" scoped>
.msg-log {
  padding: 14px 17px 19px 13px;
  display: flex;

  .main {
    height: calc(100vh - 19px - 130px);
    width: calc(100vw - 180px);
    /* background-color: #fff; */
    .header {
      background: #ffffff;
      height: 136px;
      width: 100%;
      padding-top: 30px;

      .el-form {
        padding-top: 20px;
        padding-left: 40px;
        .el-button {
          font-size: 22px;
          font-weight: 400;
          color: #ffffff;
        }
        .search {
          width: 100px;
          height: 42px;
          border-radius: 5px;
          background: #0250f9;
        }

        :deep(.el-button--large span) {
          margin: 4px !important;
        }
      }
      .report {
        display: flex;
        .select {
          background: #176ff9;
          border: none;
          color: #ffffff;
        }
        div {
          text-align: center;
          line-height: 40px;
          width: 113px;
          height: 40px;
          border-radius: 20px;
          font-weight: 500;
          font-size: 20px;
          color: #666666;
          border: 1px solid #cccccc;
          margin-left: 26px;
          cursor: pointer;
        }
        & div:first-child {
          margin-left: 0;
        }
      }
    }
    .content {
      background: #ffffff;
      margin-top: 14px;
      width: 100%;
      height: calc(100vh - 19px - 173px - 116px);
      padding-top: 30px;

      .table-wrap {
        padding: 0px 26px 0 22px;

        :deep(.el-table__body td.el-table__cell) {
          height: 5.1vh;
        }
      }
    }
  }
}
</style>
